<template>
	<view class="voucherCode">
		<block v-if="loading">
			
			
		<view class="main1">
			<view class="left">
				<view class="view1">待到店使用</view>
				<!-- <view class="view2">请在{{couponInfo.expireTime}}（含）前到店消费</view> -->
			</view>
			<view class="right">
				<!-- 分享商品 > -->
			</view>
		</view>
		
		<view class="main2">
			<view class="top">
				<view class="top_left">
					<tki-qrcode cid="OrderQrcode" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" :showLoading="false" @result="qrR" />
				<view class="top_left_box" v-if="couponInfo.statusCode!=3">
					该二维码已失效
				</view>
				</view>
				<view class="top_right">
					<view class="view1">
						{{couponInfo.name}}
					</view>
					<view class="view2">
						售价 {{couponInfo.useAmount}} 元
					</view>
				</view>
			</view>
			<view class="kNum">
				<view class="v1">
					可用数量：
				</view>
				<view class="v2">
					可用{{couponInfo.qty-couponInfo.verified_count}}份/共{{couponInfo.qty}}份
				</view>
			</view>
			<view class="scroll-item-bottom">
				<view class="item-bottom_left"></view>
				<view class="item-bottom_center">
					<view class="center-xian"></view>	
				</view>
				<view class="item-bottom_right"></view>
			</view>	
			<!-- <view class="bottom">
				<view class="left">
					<view class="view1">
						{{couponInfo.useTime}}
					</view>
					<view class="view2">
						<text v-if="couponInfo.useNum==0">不限张数</text>
						<text v-else>限使用{{couponInfo.useNum}}张</text>
						·{{couponInfo.useScope}}
					</view>
				</view>
				<view class="right" @click="applyRefund" v-if="couponInfo.isRefund">
					申请退款
				</view>
			</view> -->
		</view>
		
		<view class="main3">
			<view class="top" v-for="(item,index) in couponInfo.stores" :key="index">
				<view class="left">
					<view class="view1">
						{{item.name}}
					</view>	
					<!-- <view class="view2">
						营业时间：12:00-21:00
					</view>	 -->
					<view class="view3">
						<!-- 距您 2.2km· -->
						{{item.address}}
					</view>	
				</view>
				<view class="right" @click="phoneClick(item)">
					<image class="img" src="../../static/dh.jpg"></image>
					<view class="view">
						联系商家
					</view>	
				</view>	
			</view>	
		</view>	
		
		
		<!-- 红包到账提醒 -->
		<view class="maskFour" v-if="modalFree">
			<view class="maskFour_box">
				<view class="bj_box">
					<image
						src="https://imgs.ynz666.com/2023/12/06/YjUzODAzZmYyNmJlNTgyMWRjMTcxZTVjNmIzNTVkMDY=.png"
						mode="scaleToFill" class="free_img"></image>
						<view class="box">
							 <view class="con1">
							 	 
								 <view class="t1">
								 	{{redContent.redEnvelopeNum}}
								 </view>
								 <view class="t2">
								 	个 
								 </view>
							 </view>
							 <view class="con2">
							 	参团红包到账
							 </view>
							 <view class="con3">
							 	积分到账可换免单卡
							 </view>
							 <view class="con4">
							 	红包在【我的钱包】查看
							 </view>
						</view>
				</view>
				
					<image
						src="https://imgs.ynz666.com/2023/12/06/ZTgwNmUwNWVhZjk2NjBlY2RiOTMwNTE5YWRiNTBmODE=.png"
						mode="scaleToFill" class="free_btn" @click="getFreeCard"></image>
					<!-- <image
						src="https://imgs.ynz666.com/test/2023/11/07/YzkzMDgxYzEwM2Y0YjQ1N2QyMDcxOWFlMThhYjdlZWQ=.png"
						mode="scaleToFill" class="free_close" @click="getFreeCard"></image> -->
			</view>
		</view>
		</block>
	</view>
</template>

<script>
	var app = getApp();
		import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
		
		import { goodsDetail,pointsGoodsCancel,redEnvelopePopup } from '../../apis/index.js';
		
		import { apiOrderDetail } from '../../apis/my.js';
		
	export default {
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 160, // 二维码大小
				unit: 'px', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '../../static/logo.png', // 二维码图标
				iconsize: 0, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				
				loading:false,
				orderId:'',
				couponInfo:{
					statusCode:0,
				},
				modalFree:false,
				timing:'',
				redContent:{},
				location:'',
			}
		},
		components: {
			tkiQrcode
		},
		onLoad(options) {
			console.log(options,"订单号")
		
			this.location = app.globalData.latitude + "," + app.globalData.longitude;
			this.orderId = options.orderId;
			
		},
		onShow(){
			// console.log(11)
			// let mineInfo = uni.getStorageSync('mineInfo');
			// let that = this;
			// const timestamp = new Date().getTime();
			this.val = encodeURIComponent(JSON.stringify({
				orderId:this.orderId
			}));
			this.getUserInfo();
			
			// let that=this
			// var timerId = setTimeout(function(){
			// 	that.mtkShow=true
			// },30000);
			
			
		 //  clearInterval(that.timing)
			// that.timing=setInterval(function(){
			// 	that.redEnvelopePopupData();
			// },1000)
			
		},
		onUnload(){
			console.log("离开")
			// this.closeTime();
		},
		onHide(){
			// this.closeTime();
		},
		methods: {
			redEnvelopePopupData(){
				redEnvelopePopup().then(res=>{
					console.log(res,"res")
					this.redContent=res.data
					this.modalFree=res.data.popup
					
					if(res.data.popup){
						this.closeTime();
					}
				})
			},
			// 关闭定时
			closeTime(){
				clearInterval(this.timing)
			},
			// 关闭红包到账弹框
			getFreeCard(){
				this.modalFree=false
			},
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.getGoodsDetail();
				})
			},
			getGoodsDetail(){
				let that = this;
				let data={
					uid:that.orderId,
					lat: that.location.split(',')[0],
					lng: that.location.split(',')[1],
				}
				console.log(data,"data")
				apiOrderDetail(data).then(res=>{
					console.log(res,"res")
					this.couponInfo=res.data
					
					if(this.couponInfo.status=='待核销'){
						this.couponInfo.statusCode = 3
					}else{
						this.couponInfo.statusCode = 4
					}
					
					console.log(this.couponInfo,"this.couponInfo")
					this.loading=true
				})
			},
			// 生成二维码
			qrR(res) {
				this.src = res;
			},
			phoneClick(item){
				uni.makePhoneCall({
					phoneNumber: item.phone,
					success: function () {
					console.log("拨打电话成功！")
					},
					fail: function () {
					console.log("拨打电话失败！")
					}
				});
			},
			// 退款
			applyRefund(){
				let data={
					id:this.couponInfo.id,
					type:1
				}
				pointsGoodsCancel(data).then(res=>{
					console.log(res,"res")
					if(res.code==200){
						uni.showToast({
								title: '退款成功',
								duration: 2000,
								icon: "none"
						});
						// this.getGoodsDetail();
						this.couponInfo.status=4
						// setTimeout(function() {
						// 	uni.navigateBack({
						// 			delta: 1
						// 	})
						// }, 1000)
					}else{
						uni.showToast({
								title: '退款失败',
								duration: 2000,
								icon: "none"
						});
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F4F6FA;
	}
</style>
<style lang="scss">
.voucherCode{
	width: 100%;
	.main1{
		padding: 56rpx 32rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			flex-direction: column;
			.view1{
				font-weight: 700;
				font-size: 40rpx;
				color: #333333;
			}
			.view2{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
		.right{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.main2{
		width: 650rpx;
		border-radius: 32rpx;
		background: #fff;
		margin: 20rpx auto;
		.top{
			padding: 40rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
			.top_left{
				width: 160px;
				height: 160px;
				position: relative;
				.top_left_box{
					width: 160px;
					height: 160px;
					background: rgba(0, 0, 0, 0.5);
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					position: absolute;
					top: 0;
				}
				.img{
					width: 160px;
					height: 160px;
				}
			}
			.top_right{
				flex: 1;
				height: 248rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid rgba(239, 239, 239, 1);
				margin-left: 28rpx;
				.view1{
					font-weight: 700;
					font-size: 40rpx;
					color: #F43B00;
					text-align: center;
				}
				.view2{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					
				}
			}
		}
		.kNum{
			display: flex;
			align-items: center;
			padding: 20rpx;
			.v1{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.v2{
				color: rgba(51, 51, 51, 1);
				font-size: 26rpx;
			}
		}
		.scroll-item-bottom{
			display: flex;
			position: relative;
			width: 100%;
			align-items: center;
			.item-bottom_left{
				width: 20rpx;
				height: 40rpx;
				background-color: #F4F6FA;
				border-radius: 0 40rpx 40rpx 0;
				position: absolute;
				left: 0;
			}
			.item-bottom_center{
				width: 100%;
				margin: 30rpx 0 20rpx;
				.center-xian{
					width: 580rpx;
					border-top: 1px dashed rgba(153, 153, 153, 0.6);
					margin: auto;
				}
			}
			.item-bottom_right{
				width: 20rpx;
				height: 40rpx;
				background-color: #F4F6FA;
				border-radius: 0 40rpx 40rpx 0;
				position: absolute;
				right: 0;
				transform: rotate(180deg);
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx 30rpx;
			.left{
				display: flex;
				flex-direction: column;
				flex: 1;
				.view1{
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
				.view2{
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					padding-top: 4rpx;
				}
			}
			.right{
				width: 136rpx;
				height: 60rpx;
				border: 1rpx solid #999999;
				border-radius: 200rpx;
				display: flex;
				align-items: center;
        justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
	.main3{
		width: 650rpx;
		border-radius: 32rpx;
		background: #fff;
		margin: 20rpx auto;
		.top{
			padding: 30rpx;
			display: flex;
			align-items: center;
			.left{
				display: flex;
				flex-direction: column;
				flex: 1;
				.view1{
					font-weight: 700;
					font-size: 32rpx;
					color: #333333;
				}
				.view2{
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
				.view3{
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.img{
					width: 30rpx;
					height: 30rpx;
				}
				.view{
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					margin-top: 6rpx;
				}
			}
		}
	}
}


// 红包到账弹框
	.maskFour {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);
	
		.maskFour_box {
			width: 600rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.bj_box{
				width: 600rpx;
				height: 600rpx;
				position: relative;
				.free_img {
					width: 600rpx;
					height: 600rpx;
				}
				.box{
					width: 600rpx;
					height: 600rpx;
					position: absolute;
					top: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.con1{
						font-size: 72rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #F43B00;
						padding-top: 191rpx;
						display: flex;
						align-items: baseline;
						.t2{
							font-size: 32rpx;
						}
					}
					.con2{
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #F43B00;
					}
					.con3{
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						padding: 39rpx 0 86rpx;
					}
					.con4{
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
			
			.free_btn{
				width: 361rpx;
				height: 88rpx;
				margin: 8rpx 0 25rpx;
			}
			.free_close{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
</style>
